<template>
  <div>
    <div class="point_time_info" style="float: left;">
      <div class="flex_center" v-if="data.high_focus">
        <div class="img_box" v-for="item in data.high_focus">
          <img @click="clickViewImg(item.pic_path, 'focus')" :src="item.pic_path">
          <div class="video_time">
            {{ item.video_time }}
          </div>
        </div>
      </div>
      <p class="bottom_text" v-if="data.high_focus.length">高专注时段视频截图</p>
    </div>
    <div style="width: 1px; border: 1px solid #1A6084;background-color: #1A6084;margin:0 20px;"></div>
    <div class="point_time_info" style="float: right;">
      <div class="flex_center">
        <div class="img_box" v-for="item in data.answer_question">
          <img @click="clickViewImg(item.pic_path, 'answer')" :src="item.pic_path">
          <div class="video_time">
            {{ item.video_time }}
          </div>
        </div>
      </div>
      <p class="bottom_text" v-if="data.answer_question.length">学生回答问题时段视频截图</p>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    data: {
      type: Object,
      default: () => ({}
        // high_focus: [{
        //   pic_path: 'http://112.94.21.40:8808/public/picture/20200927/videothumb_9c05efc5369af9b0660933fa1d0a09af.png',
        //   video_time: '13分29秒'
        // }, {
        //   pic_path: 'http://112.94.21.40:8808/public/picture/20200927/videothumb_9c05efc5369af9b0660933fa1d0a09af.png',
        //   video_time: '13分29秒'
        // }],
        // answer_question: [{
        //   pic_path: 'http://112.94.21.40:8808/public/picture/20200927/videothumb_9c05efc5369af9b0660933fa1d0a09af.png',
        //   video_time: '13分29秒'
        // }, {
        //   pic_path: 'http://112.94.21.40:8808/public/picture/20200927/videothumb_9c05efc5369af9b0660933fa1d0a09af.png',
        //   video_time: '13分29秒'
        // }]
      )
    },
  },
  methods: {
    clickViewImg(url, type) {
      this.$emit('clickViewImg', { url, type })
    }
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  padding: 10px 30px;
  justify-content: space-around;
}

.point_time_info {
  width: 47%;

  .flex_center {
    display: flex;
    text-align: center
  }

  .img_box {
    width: 49%;
    height: 150px;
    margin: 5px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .video_time {
    height: 24px;
    text-align: start;
    padding-left: 10px;
    line-height: 24px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  }

  .bottom_text {
    margin-top: 5px;
    text-align: center;
  }
}
</style>